<template>
  <div class="container">
    <!-- <van-overlay class="loading-box" :show="loading" :lock-scroll="false">
      <van-loading type="spinner" color="#fe6018" />
    </van-overlay>-->

    <ul class="check-nav">
      <li :class="listParams.is_state === 0 ? 'item active' : 'item'" @click="handleCheck(0)">全部</li>
      <li :class="listParams.is_state === 1 ? 'item active' : 'item'" @click="handleCheck(1)">审核中</li>
      <li :class="listParams.is_state === 2 ? 'item active' : 'item'" @click="handleCheck(2)">代理中</li>
      <li :class="listParams.is_state === 3 ? 'item active' : 'item'" @click="handleCheck(3)">已结束</li>
    </ul>

    <div class="my-agent">
      <div v-if="loadingFlag" class="creatLoading">
        <van-loading class="loading-box" type="spinner" color="#fe6018" vertical>加载中</van-loading>
      </div>
      <van-pull-refresh
        v-else
        id="container"
        class="agent-refresh"
        v-model="isRefresh"
        @refresh="onRefresh"
      >
        <div class="agent-items">
          <van-list
            class="item-box"
            v-model="listLoading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div
              class="item"
              v-for="(item,index) in agencyList"
              :key="index"
              @click="handleReadDetail(item.order_id)"
            >
              <div class="item-nav padding">
                <div class="title">
                  <img v-if="item.store_type == 1" src="@/assets/me/monopoly.png" alt="#" />
                  <img v-else-if="item.store_type == 2" src="@/assets/me/flagship.png" alt="#" />
                  <span>{{item.store_name}}</span>
                </div>
                <div class="status" :class="{'status-img':item.start_status==3}">
                  <p v-if="item.start_status==1">审核中</p>
                  <p v-else-if="item.start_status==2">代理中</p>
                  <img v-else-if="item.start_status == 3" src="@/assets/me/end.png" alt="#" />
                  <p v-else-if="item.start_status==4">已取消</p>
                </div>
              </div>
              <div class="item-content">
                <div class="image">
                  <img :src="item.product_img" alt="#" />
                  <div v-show="!item.is_deposit" class="deposit-mask">有订金</div>
                  <div v-show="item.is_password" class="ds-mask">
                    <img src="@/assets/goods/ds2.png" class="ds-img" alt />
                  </div>
                </div>
                <div class="info">
                  <div class="title">
                    <span v-show="item.product_area">{{item.product_area}}</span>
                    {{item.product_name}}
                    {{item.product_place}}
                  </div>
                  <div class="detail">
                    <div class="detail-item">
                      <p>代理费率</p>
                      <p>{{item.agent_rate ? (item.agent_rate*100).toFixed(4) + '%' : '-'}}</p>
                    </div>
                    <div class="inline"></div>
                    <div class="detail-item">
                      <p>代理期限</p>
                      <p
                        v-if="item.payment_mode == 2"
                      >{{item.product_date + '~' + item.agency_stage_max + '个月'}}</p>
                      <p v-else>{{item.product_date ? item.product_date + '个月' : '无限期'}}</p>
                    </div>
                    <div class="inline"></div>
                    <div class="detail-item">
                      <p>已付订金</p>
                      <p>{{item.deposit_paid ? item.deposit_paid +'元' : '-'}}</p>
                    </div>
                  </div>
                  <div class="time">{{item.agent_time | parseTime}}</div>
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { getAgentAjax } from "@/api/myagency";
export default {
  data() {
    return {
      loadingFlag: false,
      loading: false,
      isRefresh: false,
      listLoading: false,
      finished: false,
      checkIndex: 0,
      agencyList: [],
      agencyState: [],
      listParams: {
        p: 1,
        limit: 10,
        is_state: 0,
        is_deposit: 0,
      },
      pages: "",
    };
  },
  created() {
    this.loadingFlag = true;
    this.listParams.p = 1;
    this._getAgentAjax();
  },
  methods: {
    // 请求我的代理商品列表数据
    _getAgentAjax() {
      getAgentAjax(this.listParams)
        .then((res) => {
          if (res.code == 1) {
            if (this.listParams.p == 1) {
              this.agencyList = res.data.list || [];
              console.log("代理商品列表数据", this.agencyList);
              this.agencyState = res.data.statistics || [];
            } else {
              this.agencyList = this.agencyList.concat(res.data.list);
              console.log("加载更多后的列表数据", this.agencyList);
            }
            this.pages = res.data.pages;
            console.log(this.finished);
          } else if (res.code == 10099) {
            this.finished = true;
          } else {
            console.log(res.msg);
          }
        })
        .finally(() => {
          this.loading = false;
          this.isRefresh = false;
          this.listLoading = false;
          this.loadingFlag = false;
        });
    },
    // 下拉刷新
    onRefresh() {
      this.listParams.p = 1;
      this._getAgentAjax();
    },
    // 上拉加载更多
    onLoad() {
      console.log("上拉加载了");
      this.listParams.p++;
      this._getAgentAjax();
    },
    // 切换栏目
    handleCheck(i) {
      this.isRefresh = true;
      this.listParams.is_state = i;
      this.listParams.p = 1;
      this.listParams.limit = 10;
      this.agencyList = [];
      this.loadingFlag = true;
      this._getAgentAjax();
    },
    // 查看代理详情
    handleReadDetail(id) {
      this.$router.push({
        path: "/agent_detail",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style lang='scss' scoped>
.container {
  width: 100vw;
  min-height: 100vh;
  background-color: #f7f7f7;
  position: relative;
  // .loading-box {
  //   // z-index: 100;
  //   .van-loading {
  //     position: absolute;
  //     top: 50%;
  //     left: 50%;
  //     transform: translate(-50%, -50%);
  //   }
  // }
  .check-nav {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-around;
    align-content: center;
    width: 100vw;
    background-color: #fff;
    z-index: 99;
    > .item {
      width: auto;
      height: 80px;
      line-height: 80px;
      font-size: 28px;
      font-weight: 500;
      color: rgba(17, 17, 17, 1);
      &.active {
        border-bottom: 4px solid #fe6018;
      }
    }
  }
  .my-agent {
    width: 100%;
    z-index: 9;
    padding-top: 120px;
    .creatLoading {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    > .agent-refresh {
      .agent-items {
        min-height: 100vh - 10;
        > .item-box {
          .van-list__loading {
            margin-top: 100px;
          }

          .item {
            margin-bottom: 20px;
            background-color: #fff;
            &:last-of-type {
              margin: 0;
            }
            > .item-nav {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 30px;
              position: relative;
              > .title {
                font-size: 28px;
                font-weight: 600;
                color: rgba(17, 17, 17, 1);
                > img {
                  width: 90px;
                  height: 30px;
                  vertical-align: middle;
                  margin-bottom: 2px;
                  margin-right: 12px;
                }
              }
              > .status {
                font-size: 28px;
                font-weight: 400;
                color: rgba(254, 96, 24, 1);
                &.status-img {
                  position: absolute;
                  top: 0;
                  right: 30px;
                }
                > img {
                  width: 80px;
                  height: 64px;
                }
              }
              > .text-blue {
                color: #387eff;
              }
            }
            > .padding {
              padding: 30px 30px 20px;
              border-bottom: 1px solid #f2f2f2;
            }
            > .item-content {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 30px 24px 42px;
              > .image {
                position: relative;
                width: 236px;
                height: 236px;
                background: rgba(238, 238, 238, 1);
                border-radius: 8px;
                > img {
                  width: 100%;
                  height: 100%;
                  position: relative;
                  z-index: 11;
                }
                > .deposit-mask {
                  position: absolute;
                  right: 16px;
                  top: 16px;
                  border-radius: 10px;
                  color: #fff;
                  padding: 4px 8px 3px 8px;
                  background: #e4b05a;
                  z-index: 33;
                  font-size: 24px;
                }
                .ds-mask {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 0;
                  left: 0;
                  background: rgba(40, 18, 11, 0.5);
                  z-index: 22;
                  .ds-img {
                    width: 52px;
                    height: 68px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                  }
                }
              }
              > .info {
                flex: 1;
                text-align: left;
                padding: 10px 20px;
                .title {
                  margin-bottom: 30px;
                  font-size: 26px;
                  font-weight: 400;
                  color: rgba(17, 17, 17, 1);
                  > span {
                    width: 48px;
                    height: 26px;
                    line-height: 26px;
                    border: 1px solid rgba(254, 96, 24, 1);
                    border-radius: 4px;
                    font-size: 20px;
                    color: rgba(254, 96, 24, 1);
                  }
                }
                .detail {
                  display: flex;
                  justify-content: space-between;
                  align-content: center;
                  margin-bottom: 54px;
                  > .detail-item {
                    text-align: center;
                    > p:nth-of-type(1) {
                      font-size: 24px;
                      font-weight: 400;
                      color: rgba(153, 153, 153, 1);
                      margin-bottom: 12px;
                    }
                    > p:nth-of-type(2) {
                      font-size: 24px;
                      font-family: PingFang SC;
                      font-weight: 400;
                      color: rgba(17, 17, 17, 1);
                    }
                  }
                  > .inline {
                    width: 1px;
                    height: 30px;
                    margin-top: 16px;
                    background: rgba(236, 236, 236, 1);
                  }
                }
                .time {
                  font-size: 22px;
                  font-weight: 400;
                  color: rgba(153, 153, 153, 1);
                }
              }
            }
          }
        }
      }
    }
    > .not-agent {
      padding: 60px 0 50px 0;
      > img {
        display: block;
        width: 230px;
        height: 331px;
        margin-left: 290px;
        margin-bottom: 30px;
      }
      > p {
        font-size: 26px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        padding-bottom: 30px;
      }
      > .go-agent {
        margin: 0 auto;
        width: 240px;
        height: 70px;
        line-height: 70px;
        color: #fff;
        font-size: 28px;
        background: linear-gradient(
          90deg,
          rgba(255, 147, 3, 1),
          rgba(254, 96, 24, 1)
        );
        border-radius: 4px;
      }
    }
  }
}
</style>
